<template>
  <a-modal
    v-model="visible"
    :title="title"
    ok-text="提交评分"
    cancel-text="取消"
    :confirmLoading="loading"
    @ok="confirm"
    @cancel="hide"
  >
    <a-row>
      <a-col :span="24">
        <score :value="value" />
      </a-col>
      <a-col :span="16">
        <a-slider v-model="value" :min="0" :max="100" />
      </a-col>
      <a-col :span="4">
        <a-input-number v-model="value" :min="1" :max="100" style="marginLeft: 16px" />
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
// 组件
import Score from '@/components/Score'

// api
import { missionScore } from '@/api/mission'

export default {
  components: {
    Score
  },
  data () {
    return {
      loading: false,
      title: '',
      missionId: '',
      visible: false,
      value: 66
    }
  },
  methods: {
    show ({
      title,
      missionId
    }) {
      this.title = title
      this.missionId = missionId
      this.visible = true
    },
    hide () {
      this.title = ''
      this.missionId = ''
      this.visible = false
      this.value = 0
    },
    async confirm () {
      try {
        this.loading = true
        await missionScore({
          score: this.value,
          missionId: this.missionId
        })
        this.$emit('finished')
        this.hide()
      } catch (error) {

      } finally {
        this.loading = false
      }
    }
  }
}
</script>
